<template>
  <div>
    <!-- 1.0 头部导航结构 -->
    <van-nav-bar
      title="精彩跟帖"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push({ path: '/' })"
    >
    <template #right>
        <van-icon
          name="wap-home-o"
          color="#f00"
          size="6vw"
        />
      </template>
    </van-nav-bar>
    <!-- 下拉刷新 -->
     <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
    >
    <!-- 2.0 评论列表 -->
       <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="list"
      >
      <div
        class="item"
        v-for="item in commentList"
        :key="item.id"
      >
        <div class="item-header">
          <van-image
            class="avatar"
            :src="item.user.head_img |imgUrl"
          />
          <div class="info">
            <p class="username">{{ item.user.nickname }}</p>
            <p class="date">{{ item.create_date }}</p>
          </div>
          <span class="reply" @click="reply(item)">回复</span> 
        </div>
        <MyContent v-if="item.parent" :parent='item.parent'
        @parentReply="reply"
        
        ></MyContent>
        <div class="item-footer">
          <p class="content">{{ item.content }}</p>
        </div>
      </div>
    
    <van-empty  v-if="commentList.length===0" description="空空如也" />
      </van-list>
       </van-pull-refresh>
    <!-- 3.0底部评论 -->
    <MyComment 
    :article='article'
     @update="updateFn" 
     ref='Mycomment'
:commentObj='temp'
@reset='temp=null'
     ></MyComment>
  </div>
</template>

<script>
import { getPostCommentByIdAPI,getPostDetailByIdAPI } from "../apis/news";
import MyContent from '../components/MyContent.vue'
import MyComment from '../components/MyComment.vue'
export default {
    components: {
        MyContent,
        MyComment
    },
  data() {
    return {
        id:this.$route.params.id,
      commentList: [],
      article:{},
      temp:null,
      //这是页码
      pageSize:10,
      //分页用在每次加一上
      pageIndex:1,
      //刚开始的加载图标不会出现
      loading:false,
      finished:false,
refreshing:false,
      
    };
  },
  async created() {
      this.getCommentList()
    // 获取文章 id， id为1的文章有一些的评论数据。
    // const id = this.$route.params.id;
    // console.log(id);
   

    //根据文章id拿到id数据
    const res2= await getPostDetailByIdAPI(this.id)
    console.log(res2);
    this.article=res2.data.data
  },
  methods: {
    //下拉刷新时候触发
   async onRefresh(){
      //页面重置
this.pageIndex=1;
//重置数组
this.commentList=[];
// 、、隐藏
this.finished=false;
//显示加载图标
this.loading=true
await this.getCommentList();
this.refreshing=false

    },
    onLoad(){
this.pageIndex++;
this.getCommentList();

    },
    //点击恢复按钮
    reply(item){
      //通过组件实例，调用组件内的方法实现展示文本域，就是显示回复框
this.$refs.Mycomment.inputFn()
// console.log(item);
//把原本的数据item传递数值给temp
this.temp=item
// this.commentList=this.temp
// this.getCommentList()

    },
     async getCommentList(){
 // 根据文章 id 获取文章的评论列表
    const res = await getPostCommentByIdAPI(this.id,{
      pageIndex: this.pageIndex,
        pageSize: this.pageSize,
    });
    console.log(res);
   if(res.data.data.length===0){
      this.finished=true;
      return;
   }
    this.commentList.push(...res.data.data);
    //隐藏加载中的提示
      this.loading=false;

      },
      updateFn(){
 this.onRefresh()
 //平滑滚动，手机端可用
 window.scrollTo({top:0,behavior:'smooth'});
//  回复成功后清空回复对象
 this.temp=null
      }
  }
};
</script>

<style lang="less" scoped>
.list {
  .item {
    border-bottom: 1px solid #ddd;
    padding: 10px;
    .item-header {
      display: flex;
      .avatar {
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }
      .info {
        flex: 1;
        .username {
          font-size: 16px;
        }

        .date {
          font-size: 13px;
          color: #666;
          position: relative;
          z-index: 10;
        }
      }
    }

    .reply {
      font-size: 14px;
      color: #666;
    }

    .item-footer {
      .content {
      }
    }
  }
}
</style>